<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>客户体检信息健康管理系统</title>
    <meta name="description" content="客户体检信息健康管理系统">
    <meta name="keywords" content="客户体检信息健康管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>会员管理<small>体检上传</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>会员管理</el-breadcrumb-item>
            <el-breadcrumb-item>体检上传</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="app-container">
        <div class="box">
            <div class="filter-container">
                <el-input placeholder="姓名/手机号" v-model="pagination.queryString" style="width: 200px;"
                          class="filter-item"></el-input>
                <el-button @click="_findPage()" class="dalfBut">查询</el-button>
            </div>
            <el-table size="small" current-row-key="id" :data="dataList" stripe highlight-current-row>
                <el-table-column type="index" align="center" label="序号"></el-table-column>
                <el-table-column prop="orderDate" label="体检时间" :formatter="dateFormat" align="center"></el-table-column>
<!--                <el-table-column prop="fileNumber" label="档案号" align="center"></el-table-column>-->
                <el-table-column prop="name" label="姓名" align="center"></el-table-column>
                <el-table-column prop="phoneNumber" label="手机号码" align="center"></el-table-column>
                <el-table-column prop="setmealName" label="体检套餐" align="center"></el-table-column>
                <el-table-column prop="reportStatus" label="报告状态" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <!--                                通过scop.row拿取当前这条列的数据，对应与这条列的json对象-->

                        <!--                                <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">上传报告</el-button>-->
                        <!--                                    :data="scope.row"-->
                        <!--                                在handleAvatarSuccess里面进行axios访问，这里不需要点击事件，
                                                               点击的作用就是将当前的scope.row进行赋值给data里面的一个变量-->

                        <el-upload
                                ref="upload"
                                class="avatar-uploader"
                                action="/report/upload.do"
                                :auto-upload="autoUpload"
                                name="reportFile"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload(scope.row)">
                            <el-button style="position: absolute;left: 10px;top:20px;" size="mini" type="primary"
                                       @click="handleEdit(scope.row)">报告上传
                            </el-button>
                        </el-upload>
                        <el-button style="position: relative;left: 60px;top:-10px;"
                                   size="mini" type="danger"
                                   @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination
                        class="pagiantion"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.currentPage"
                        :page-size="pagination.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="pagination.total">
                </el-pagination>
            </div>
        </div>
    </div>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index_copy.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {
            autoUpload: true,//自动上传
            fileName: null,//模型数据，上传的文件名称
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize: 10,//每页显示的记录数
                total: 0,//总记录数
                queryString: null//查询条件
            },

            dataList: [],//当前页要展示的分页列表数据
            orderStatus: "",
            formData: {
                id: "",
                memberId: "",
                fileName: "",
                setmealId: ""
            },//表单数据
            dialogFormVisible: false,//增加表单是否可见
            user: "",
            dialogFormVisible4Edit: false,//编辑表单是否可见
            memberId: '',
            rules: {//校验规则
                code: [{required: true, message: '项目编码为必填项', trigger: 'blur'}],
                name: [{required: true, message: '项目名称为必填项', trigger: 'blur'}]
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.user = JSON.parse(localStorage.getItem("userInfo"));
            this.findPage();//vue对象初始化完成后调用分页查询方法，完成分页查询
        },
        methods: {
            handleEdit(row) {
                this.orderStatus = row.orderStatus
                this.formData.id = row.id
                this.formData.memberId = row.memberId
                this.formData.setmealId = row.setmealId
            },
            dateFormat(row, column) {
                let t = new Date(row.orderDate);//row 表示一行数据, updateTime 表示要格式化的字段名称
                return t.getFullYear() + "年" + (t.getMonth() + 1) + "月" + t.getDate() + "日";
            },
            //文件上传成功后的钩子，response为服务端返回的值，file为当前上传的文件封装成的js对象
            handleAvatarSuccess(response, file) {
                // alert("上传成功之后");
                //response为服务端返回的值，是elementUI自带的
                //为模型数据imageUrl进行赋值，用于页面图片预览
                this.formData.fileName = '../upload/' + response.data;
                console.log(this.orderStatus)
                //弹出提示
                if (this.orderStatus == '未到诊') {
                    this.$message({
                        type: 'warning',
                        message: '上传失败!,该体检还没有到诊'
                    });
                    return false;
                }

                this.$message({
                    type: response.flag ? "success" : "error",
                    message: response.message
                });
                /*console.log("上传之后的的文件名称：" + this.fileName);
                console.log("参数file:" + file.date);
                console.log("参数response：" + response.data)*/
                // this.handleUpdate(row);
                // console.log("发送请求之后的数据：" + this.formData);
                //获取当前会员的id，通过这个id进行操作
                axios.post("/report/update.do", this.formData).then((res) => {
                    //判断这个controller是否执行成功
                    // alert("现在是update在执行："+this.fileName+",numberId="+this.memberId)
                    // console.log("update里面的:formData" + this.formData);
                    if (res.data.flag) {
                        //进行回显，基于vue的数据绑定实现，可以查看上面的内容可以发现都是双向绑定formData内容的
                        //操作成功
                        this.$message({
                            type: 'success',
                            message: res.data.message
                        });
                        this.findPage();
                    } else {
                        //查询失败，弹出提示
                        this.$message.error(res.data.message);
                    }

                }).catch((r) => {
                    this.showMessage(r);
                });

            },
            //上传图片之前执行
            beforeAvatarUpload(row, file) {
                /*if () {
                    this.$refs.upload.abort(file);
                }*/
                //根据电话号码获取请求的会员Id
                /*axios.get('/report/findReportByPhoneNumber.do?phoneNumber=' + row.phoneNumber).then((result) => {
                    /!*this.formData.memberId = result.data.data.id
                    this.formData.setmealId = row.setmealId*!/
                }).catch((r) => {

                });*/

                // alert("上传成功之前")
                // this.handleAvatarSuccess()
                // alert("file.id")
                // const isJPG = file.type === 'image/jpeg';
                // const isLt2M = file.size / 1024 / 1024 < 2;
                // if (!isJPG) {
                //     this.$message.error('上传套餐图片只能是 JPG 格式!');
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传套餐图片大小不能超过 2MB!');
                // }
                // return isJPG && isLt2M;

            },
            //分页查询
            async findPage() {
                if (this.user.roles[0].keyword == 'ROLE_HEALTH_MANAGER') {
                    let result = await axios.post("/orderSetting/findPage.do?userName=" + this.user.username, this.pagination);
                    this.dataList = result.data.rows
                    //过滤查询
                    this.dataList = this.dataList.filter((item) => {
                        //过滤条件:判断健康管理师的Id是否与预约对象的ID相同
                        // console.log(item.userId == this.user.id)
                        return item.userId == this.user.id
                    })
                    this.pagination.total = this.dataList.length
                } else {
                    let result = await axios.post("/orderSetting/findPage.do?userName=" + null, this.pagination);
                    this.dataList = result.data.rows
                    this.pagination.total = result.data.total
                }
                //封装请求参数数据（页码、每页显示的条数、查询条件），进行传送queryPageBean
                //发送ajax请求，提交分页相关请求参数（页码、每页显示的条数、查询条件）
                /*axios.post("/orderSetting/findPage.do", this.pagination).then((res) => {
                    //解析controller响应回的数据，为模型数据赋值
                    this.pagination.total = res.data.total;//总记录数
                    this.dataList = res.data.rows;//返回的数据集合
                    if (this.user.roles[0].keyword == 'ROLE_HEALTH_MANAGER') {
                        //过滤查询
                        this.dataList = this.dataList.filter((item) => {
                            //过滤条件:判断健康管理师的姓名是否与
                            return item.userId === this.user.id
                        })
                        this.pagination.total = this.dataList.length
                    } else {
                        this.pagination.total = result.data.total
                    }
                    console.log(this.dataList)
                }).catch((r) => {
                    this.showMessage(r);
                });*/
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //设置最新的页码
                this.pagination.currentPage = currentPage;
                //重新调用findPage方法进行分页查询
                this.findPage();
            },
            //检查是否有权限
            showMessage(r) {
                if (r == 'Error: Request failed with status code 403') {
                    //权限不足
                    this.$message.error('无访问权限');
                    return;
                } else {
                    this.$message.error('未知错误');
                    return;
                }
            },
            // 删除
            handleDelete(row) {
                this.$confirm("你确定要删除当前报告内容吗?", "提示", {
                    type: 'warning'
                }).then(() => {
                    //判断报告是否上传
                    if (row.reportStatus === '已上传') {
                        // alert("点击了确定按钮");
                        //用户点击确认按钮，发送ajax请求，将检查项提交到Controller进行处理
                        axios.get("/report/delete.do?id=" + row.reportId).then((res) => {
                            //判断是否执行成功
                            if (res.data.flag) {
                                //执行成功
                                //弹出成功提示信息
                                this.$message({
                                    type: 'success',
                                    message: res.data.message
                                });
                                //重新进行分页查询
                                this.findPage();
                            } else {
                                //执行失败
                                this.$message.error(res.data.message);
                            }
                        }).catch((r) => {
                            this.showMessage(r);
                        });
                    } else {
                        // alert("点击了取消按钮");
                        this.$message({
                            type: 'warning',
                            message: '此会员还未上传体检报告,无法删除'
                        });
                    }
                }).catch(() => {
                    // alert("点击了取消按钮");
                    this.$message({
                        type: 'info',
                        message: '操作已取消'
                    });
                });
            }
        }
    })
</script>
</html>
